1.走起我的vue2.0
live-server使用
用npm进行全局安装
1 | npm install live-server -g |
在项目目录中打开
1 | live-server |
2.v-if v-else v-show
v-if 和v-show的区别:
- v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
- v-show:调整css dispaly属性,可以使客户端操作更加流畅。
3.v-for
数字排序
1 | computed:{ |
对象循环输出
1 | //数组对象方法排序: |
4.v-text & v-html
1 | <span>{{ message }}</span>=<span v-text="message"></span> |
需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
5.v-on:绑定事件监听器
1 | v-on: = @ |
ps:文本框的数字会默认转变成字符串,所以我们需要用parseInt()函数进行整数转换。
6.v-model指令
绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定。
7.v-bind指令
缩写
1 | <!-- 完整语法 --> |
8.v-pre&v-cloak&v-once
v-pre
1 | <div v-pre>{{message}}</div> |
这时并不会输出我们的message值,而是直接在网页中显示
v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用,
1 | [v-cloak] { |
v-once
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。